<!-- 助力页面 -->
<template>
	<view class="container">
		
		<div class="inner">
			<view class="content">
				<image v-if="vdata.shareParams.headPic" class="avatar" :src="vdata.shareParams.headPic"></image>
				<image v-else class="avatar" src="../../static/new/user/default-head.png"></image>
				
				<button class="invite-btn" plain @click="onHelpHandle">点击为好友{{ vdata.shareParams.nickName || vdata.shareParams.phone }}助力</button>
				
				<image class="title" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/21e8e2fe-311d-452c-bc49-4511f54f512b.png" style="margin-top: 52rpx;"></image>
				
				<view class="invite-rules">
					<text>1、点击助力后将跳转小程序，进入小程序后自动助力成功。\n2、进入小程序后可参与邮政活动。\n3、参与活动不会产生任何费用。</text>
				</view>
			</view>
		
			<view class="red-line"></view>
		</div>
	</view>
	
	<!-- 授权登录弹窗 -->
	<gzLoginPopup ref="gzLoginPopupRef" v-model:isLogin="vdata.isLogin"></gzLoginPopup>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, reactive, getCurrentInstance } from "vue"
	import storageManage from '@/util/storageManage.js'
	import { $activityHelp } from '@/http/apiManager.js'
	import { reLaunch } from '@/util/interceptors.js'
	
	// 弹窗封装
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	// 登录弹框实例
	const gzLoginPopupRef = ref()
	
	const vdata = reactive({
		isLogin: false,	// 用户登录状态
		shareParams: ''
	})
	
	onLoad(({ shareParams }) => {
		// 初始化用户登录状态
		vdata.isLogin = storageManage.isLogin()
		vdata.shareParams = JSON.parse(shareParams)
		// 如果邀请人未登录 则进行弹窗提示
		if (!vdata.isLogin) {
			// 加载弹窗打开
			uni.showModal({
				title: '提示',
				content: '请先进行登录注册，再为好友助力！',
				success({ cancel }) {
					if (cancel) {
						$infoBox.toast('登录失败，无法为好友助力！')
					} else {
						gzLoginPopupRef.value.open() // 打开授权弹框
					}
				}
			})
			return
		}
	})
	
	// 助力
	async function onHelpHandle(){
		// 判断用户是否登录
		if (!vdata.isLogin){
			gzLoginPopupRef.value.open() // 打开授权弹框
			return
		}
		const { activityId, userId, activityHelpId } = vdata.shareParams
		try {
			uni.showLoading({ title: '助力中...' })
			await $activityHelp({ activityId, userId, activityHelpId })
			$infoBox.toast('助力成功',{ mask: true, duration: 2000 })
		} finally {	// 助力成功失败都往活动条
			// 助力成功后跳转活动
			setTimeout(() => {
				reLaunch({
					url: `?activityId=${activityId}`
				})
			},2000)
		}
	}
</script>

<style lang="less" scoped>
	.container{
		width: 100%;
		min-height: 100vh;
		max-height: 2359rpx;
		background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/3c16a284-b6ba-406b-9de1-77b436008f38.png'),
						  url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/159efea8-a4f7-40a4-b7b4-13d171d168f6.png'),
						  url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d7c76e9d-c3d0-4f4e-8fbb-f1cb16ef6b90.png'),;
		background-repeat: no-repeat;
		background-position: 0 100%,0 0, 0 1232rpx;
		background-size: 100% 168rpx, 100% 1232rpx, 100% 1127rpx;
		
		position: relative;
	
		.inner{
			padding: 642rpx 40rpx 180rpx;
			.content{
				background-color: #FFFFFF;
				border-radius: 20rpx 20rpx 0 0;
				box-shadow: 0 30rpx 30rpx 30rpx #FFF4E9 inset;
				padding: 30rpx 55rpx 60rpx;
				text-align: center;
				position: relative;
				z-index: 2;
				
				.avatar{
					width: 262rpx;
					height: 262rpx;
					border-radius: 50%;
					display: inline-block;
					margin: 40rpx 0;
				}
				
				.title{
					width: 278rpx;
					height: 62rpx;
				}
				
				.invite-btn{
					border: none;
					background: linear-gradient(180deg, #F78D52, #F93A35);
					max-width: 440rpx;
					border-radius: 45rpx;
					color: #fff;
					font-weight: bold;
					font-size: 38rpx;
					letter-spacing: 5rpx;
					line-height: initial;
					padding: 15rpx 0;
					margin-top: 15rpx;
				}
				.invite-rules{
					text-align: left;
					background-color: #FFF6DB;
					border-radius: 10rpx;
					padding: 30rpx 40rpx;
					margin-top: 33rpx;
					text{
						font-weight: 400;
					}
				}
			}
		
			.red-line{
				width: calc(100% + 40rpx);
				height: 24rpx;
				background-color: #FB3835;
				border-radius: 24rpx;
				position: relative;
				top: -12rpx;
				left: -20rpx;
				z-index: 1;
			}
		}
	}
</style>